<template>
  <n-card :title="title" bordered>
    <div class="content">
      <span class="text-3xl">
        {{ count }}
      </span>
      <component :is="icon" class="icon"></component>
    </div>
  </n-card>
</template>

<script setup lang="ts">
import { NCard } from "naive-ui";
const props = defineProps({
  title: String,
  count: Number,
  icon: Function,
});
const { title, icon, count } = props;
</script>
<style lang="scss" scoped>

.n-card{
  border-radius: 5px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  :deep(.n-card-header) {
    border-bottom: 1px solid #ccc;
  }
  :deep(.n-card__content){
    padding: 20px 24px;
  }
  .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .icon {
    font-size: 35px;
  }
}
}

</style>
